<template>
  <div class="wrapper">
    <el-card shadow="never" class="statement-search-box">
      <el-form :inline="true" label-position="left" label-width="auto">
        <div class="item">
          <el-form-item label="时间筛选">
            <el-button plain :type="dateType == 0 ? 'primary' : ''" @click="onChangeDate(0)">昨天</el-button>
            <el-button plain :type="dateType == 1 ? 'primary' : ''" @click="onChangeDate(1)">最近7天</el-button>
            <el-button plain :type="dateType == 2 ? 'primary' : ''" @click="onChangeDate(2)">最近30天</el-button>
            <el-date-picker
              v-model="formData.activity_time"
              type="datetimerange"
              popper-class="selectTime_date"
              prefix-icon="Calendar"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              range-separator="—"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="(v) => v || (formData.activity_time = filterDate[1])"
            />
          </el-form-item>
          <div class="btn_box">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onClear">清空</el-button>
          </div>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { getFilterDate } from '@/utils/utils'
  import { reactive, ref } from 'vue'
  const emit = defineEmits(['submit'])
  let filterDate: any = []
  const formData: any = reactive({
    activity_time: []
  })
  const dateType = ref(1)
  const onSubmit = () => {
    formData.activity_time || (formData.activity_time = filterDate[1])
    emit('submit', formData)
  }
  const onChangeDate = (index: any) => {
    dateType.value = index
    formData.activity_time = filterDate[index]
    onSubmit()
  }
  const onClear = () => {
    dateType.value = 1
    formData.activity_time = filterDate[1]
    onSubmit()
  }
  const onInit = (v?: any) => {
    filterDate = getFilterDate(v)
    formData.activity_time = filterDate[1]
    onSubmit()
  }
  defineExpose({
    onInit
  })
</script>

<style lang="scss" scoped>
  :deep(.el-radio-group) {
    .el-radio {
      margin: 0;

      .el-radio__input {
        display: none;
      }
    }
  }

  .wrapper {
    margin-bottom: 16px;

    .item {
      display: flex;
      justify-content: space-between;
      .el-form-item {
        margin-bottom: 0;
      }

      :deep(.el-date-editor) {
        padding-top: 2px;
        margin-left: 10px;
      }

      .btn_box {
        text-align: right;
      }
    }
  }
</style>
